import React, { useState, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { Card, List, Button } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { reqIdToCategory, AxiosResponse } from '../../../api';
import './index.less';

type Column = {
    parentName: string;
    subName?: string;
};

type ProductKey = 'parentId' | '_id' | 'name';
type Product = Record<ProductKey, string> & { __v: 0; }
type DataStatus = {
    status: 0;
    data: Product;
};

const { Item } = List;

// Product 详情子路由组件
const ProductDetail: React.FC = () => {
    const [{ parentName, subName }, setProductName] = useState<Column>({
        parentName: '',
        subName: ''
    });
    const { state: {
        name,
        desc,
        price,
        pCategoryId,
        categoryId,
        imgs,
        detail
    } } = useLocation();
    const navigate = useNavigate();
    const handleBack = (): void => {
        navigate(-1);
    };
    const title: React.ReactNode = (
        <span>
            <Button type="link" style={{ marginRight: 10, color: 'green', fontSize: 16 }} onClick={handleBack}>
                <ArrowLeftOutlined />
            </Button>
            <span>商品详情</span>
        </span>
    );
    useEffect(() => {
        (async () => {
            const { data: { data: { name } } }: AxiosResponse<DataStatus> = await reqIdToCategory(categoryId);
            if (pCategoryId === '0') {
                setProductName({ parentName: name });
                return;
            }
            const { data: { data } }: AxiosResponse<DataStatus> = await reqIdToCategory(pCategoryId);
            setProductName({ parentName: data.name, subName: name });
        })();
    }, [pCategoryId, categoryId]);
    return (
        <Card className="product-detail" title={title}>
            <List>
                <Item className="product-item">
                    <span className="left">商品名称：</span>
                    <span>{name}</span>
                </Item>
                <Item className="product-item">
                    <span className="left">商品描述：</span>
                    <span>{desc}</span>
                </Item>
                <Item className="product-item">
                    <span className="left">商品价格：</span>
                    <span>{price}元</span>
                </Item>
                <Item className="product-item">
                    <span className="left">所属分类：</span>
                    <span>{parentName}{subName && ` > ${subName}`}</span>
                </Item>
                <Item className="product-item">
                    <span className="left">商品图片：</span>
                    <span>
                        {
                            imgs.map((img: string): React.ReactNode => <img
                                className="product-img"
                                key={img}
                                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fpc_best%2F2112%2F01%2Fc77%2F286000920_1638338043405_255x255.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643163348&t=e1d20fa0ab2d4a2967b42f840e6fd5f3"
                                alt="img1"
                            />)
                        }
                    </span>
                </Item>
                <Item className="product-item">
                    <span className="left">商品详情：</span>
                    <span dangerouslySetInnerHTML={{ __html: detail }}></span>
                </Item>
            </List>
        </Card>
    );
};

export default ProductDetail;